<template>
  <div class="song-list">
    <div class="all">
      <i class="iconfont">&#xe60f;</i>
      <i>共{{songs.length}}歌曲</i>
    </div>
    <ul>
      <li
        class="item"
        v-for="(song,index) in songs"
        :key="song.id"
        @click="selectItem(song, index)"
      >
        <div class="content">
          <div class="number">{{index+1}}</div>
          <div class="SongName">
            <p class="name">{{song.name }}</p>
            <p class="desc">{{song.singer}}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SongList',
  props: {
    songs: {
      type: Array
    }
  },
  methods: {
    selectItem(item, index) {
      this.$emit('select', item, index)
    }
  }
}
</script>

<style lang="stylus" scoped>
.song-list
  background #f2f3f4
  .all
    width 100%
    height 60px
    line-height 60px
    padding 0 0 0 16px
    i
      font-size 17px
      font-weight 600
      padding 0 1px
  .item
    width 100%
    height 65px
    // line-height: 65px;
    // padding 0 0 0 16px
    font-size 16px
    color #2e3030
    letter-spacing 0.5px
    border-top 1px solid #ccc
    border-top-left-radius 6px
    border-top-right-radius 6px
    .content
      width 100%
      height 100%
      display flex
      // justify-content center
      align-items center
      .number
        flex 1
        height 100%
        color #757575
        font-size 16px
        text-align center
        line-height 65px
      .SongName
        height 100%
        flex 9
        display flex
        flex-direction column
        justify-content space-around
        color #757575
        font-weight 700
        overflow hidden
        padding 0 10px
        .name
          width 100%
          padding-top 10px
          font-size 16px
          font-weight 700
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
        .desc
          font-size 12px
</style>
